import React from 'react'
import { changeNav,getGroupdetail,getStoredetail,getGroupopened,getStoreopened ,getServiceinfo,getArea,
    getProvince,modifyServicer,getCity,getRegion} from '../../actions'
import { connect } from 'react-redux'
import { List,Tabs,InputItem,WhiteSpace,Button,WingBlank,Icon,Picker,Toast } from 'antd-mobile'
import hhistory from '../../history'
import { ajaxGet,ajaxPost,ajaxDelect ,ajaxPut} from '../../common/jsajaxservice.js'
import { createForm } from 'rc-form'
const TabPane = Tabs.TabPane;

const Item = List.Item
const Brief = Item.Brief

var urldata = ""

class GroupDetail extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            status:1,
            urlId:0,
            urlType:'',
        }

    }
    componentWillMount(){
        urldata = this.props.params.type.split("_")
        this.setState({
            urlId:urldata[1],
            urlType:urldata[0]
        })
		this.props.tochangeNav({title:"集团详情"})
		this.props.getGroupdetail( urldata[1] )
		this.props.getGroupopened( urldata[1] )
	}
    componentWillReceiveProps(nextprops){
        this.setState({
            status:nextprops.groupDetail.statusGroup,
            province:nextprops.groupDetail.province?[nextprops.groupDetail.province]:[],
        })
    }
    toggleUsedType() {
    	let type = this.state.status?1:0;
    	let that = this;
            ajaxDelect( "bd/group/"+ this.state.urlId +'/'+type).then((res) => {console.log(res)
                that.setState({
                    status:!this.state.status
                })
            })
	}
	reviseInfo(){
    	sessionStorage.setItem('Groupdetail',JSON.stringify(this.props.groupDetail));
		hhistory.push('/tenantPush')
	}
	render(){
		const { groupDetail,alreadyOpened,params } = this.props
        const { getFieldProps} = this.props.form
		return(
			<div className='groupDetail'>
			 <List>
				<Item
		          thumb={
		          	<img style={{ width:"1.2rem",height:"1.2rem",margin:'0.4rem 0.1rem' }} src={
		          		groupDetail.groupLogo ? groupDetail.groupLogo : "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
		          	}/>
		          }
		          arrow="empty"
		        >
		          { groupDetail.groupName }
		          <Brief>
					<p style={{color:"#a4a4a4",fontSize:"0.3rem"}}>{groupDetail.groupShortName}</p>
					<p style={{color:"#a4a4a4",fontSize:"0.26rem"}}><Icon style={{width:'0.3rem',marginBottom:'-0.12rem'}} type={require('./../../components/assets/icon_gg_bianhao.svg')}></Icon>  {groupDetail.groupCode}</p>
				  </Brief>
		        </Item>
		    </List>

		    <Tabs  defaultActiveKey="1" onChange={()=>{}} onTabClick={()=>{}}>
		      <TabPane tab={<div><Icon style={{width:'0.3rem',marginBottom:'-0.12rem'}}  type={require('./../../components/assets/icon_sh_xq_jichudangan.svg')}></Icon>  基础档案</div>} key="1">
				  <WhiteSpace></WhiteSpace>
		        <List renderHeader={() => '联系方式'}>
		        	<InputItem
                        editable={true}
                        {...getFieldProps('contactName',{
                            initialValue:groupDetail.contactName
                        })}
			        >联系人：</InputItem>
			        <InputItem
                        editable={true}
                        {...getFieldProps('contactMobile',{
                            initialValue:groupDetail.contactMobile
                        })}

			        >手机号：</InputItem>
			        <InputItem
                        editable={true}
                        {...getFieldProps('contactEmail',{
                            initialValue:groupDetail.contactEmail
                        })}
						placeholder={'请填写邮箱'}
			        >邮箱：</InputItem>
		        </List>
				  <WhiteSpace></WhiteSpace>
		        <List renderHeader={() => '集团地址'}>
		        	<InputItem
						editable={true}
						value={groupDetail.areaName}
			        >所属大区：</InputItem>
                    <InputItem
                        editable={true}
                        value={groupDetail.provinceName+groupDetail.cityName+groupDetail.regionName}
                    >街道地址：</InputItem>
			        <InputItem
                        editable={true}
                        {...getFieldProps('address',{
                            initialValue:groupDetail.address,
                            rules: [{required: true}]
                        })}
			        >街道地址：</InputItem>
			        <InputItem
                        editable={true}
                        {...getFieldProps('remark',{
                            initialValue:groupDetail.remark
                        })}
						placeholder={'备注'}
			        >备注：</InputItem>
		        </List>
				  <div style={{marginTop:'0.4rem',background:'#fff',width:'100%',height:'1.6rem',padding:'0.4rem 0'}}>
					  <Button onClick={this.toggleUsedType.bind(this)} style={{border:'0.01rem solid #FD8900',width:'40%',height:'0.9rem',color:'#FD8900',fontSize:'0.32rem',lineHeight:'0.85rem',float:'left',marginLeft:'0.38rem'}}>
						  {this.state.status?"关闭":"开启"}
					  </Button>
					  <Button style={{background:'#FD8900',width:'40%',height:'0.9rem',color:'#fff',fontSize:'0.32rem',lineHeight:'0.85rem',float:'right',marginRight:'0.38rem'}}
							  onClick={this.reviseInfo.bind(this)}>编辑</Button>
				  </div>
		      </TabPane>
		      <TabPane tab={<div><Icon style={{width:'0.3rem',marginBottom:'-0.12rem'}} type={require('./../../components/assets/icon_sh_xq_yikaitong.svg')}></Icon>  基础档案</div>}  key="2">
				  <WhiteSpace></WhiteSpace>
				  <List style={{display:alreadyOpened.length == 0?'none':'block',}} renderHeader={() => '已开通产品'}>
			        {
			        	alreadyOpened.map( ( item,i ) => {
			        		return (
								<Item
									style={{paddingRight:'0 !important'}}
								  key={i}
								  arrow="horizontal"
						          thumb={
						          	<img style={{ width:"0.9rem",height:"0.9rem",margin:'0.15rem 0.1rem' }} src={
						          		item.productUrl ? item.productUrl : "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
						          	}/>
						          }
						          onClick={() => {

						          	hhistory.push( '/abDetail/' + params.type )

						          }}
						        >
						          <p style={{color:'#333',fontSize:'0.28rem'}}>{ item.productName }</p><p style={{color:"#a4a4a4",fontSize:'0.26rem'}}>{ item.productCode }</p>
						          {/*<Brief></Brief>*/}
						        </Item>
			        		)
			        	} )
			        }
			        <WhiteSpace></WhiteSpace>
				  </List>
			    <WhiteSpace size="xl" />
				    <Button
						style={{margin:'0',color:'#fff',background:'#FFC37D',borderRadius:'0'}}
						className="btn" onClick={ ()=>{ hhistory.push('/tenantBind') } }>
						+ 绑定已有产品/业务账号
			        </Button>
		      </TabPane>
			</Tabs>
			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
	  groupDetail:state.groupDetail,
	  alreadyOpened:state.alreadyOpened,
	  locationInfo:state.locationInfo
	  // storeDetail:state.storeDetail
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) ),
	getGroupdetail:groupcode => dispatch( getGroupdetail( groupcode ) ),
	getStoredetail:storecode => dispatch( getStoredetail( storecode ) ),
	getGroupopened:groupcode => dispatch( getGroupopened( groupcode ) ),
	getStoreopened:storecode => dispatch( getStoreopened( storecode ) ),
    getProvince:() => dispatch( getProvince() ),
    getCity:code => dispatch( getCity(code) ),
    getRegion:code => dispatch( getRegion(code) )
})

export default createForm()(connect( mapStateToProps,mapDispatchToProps )( GroupDetail ))